<template>
	<view class="context">
		<view class="tab">
			<w-tab :data="tabData" @change="tabChange"></w-tab>
		</view>
		<!-- 组件 -->
		<view class="sub-tab">
			<w-tab-other @subTabChange="subTabChange" :data="subTabData"></w-tab-other>
		</view>
		<view class="box">
			<view class="box-item">
				<view class="box-item-head">
					<view class="item-head-icon">
						<image src="/static/ICON_BTC21.png"></image>
					</view>
					<text class="item-head-title">FIL云算力</text>
				</view>
				<view class="box-item-info">
					<view class="item-info-content">
						<text>总算力</text>
						<text>1TB</text>
					</view>
					<view class="item-info-content">
						<text>累计产出</text>
						<text>750 USDT</text>
					</view>
					<view class="item-info-content">
						<text>购买金额</text>
						<text>720</text>
					</view>
					<view class="item-info-content">
						<text>剩余天数</text>
						<text>720</text>
					</view>
				</view>
				<u-line color="#f5f5f5" margin="20rpx auto"></u-line>
				<view class="box-item-number">
					<text class="item-number">订单号：321654987</text>
					<button class="submit">权益转让</button>
				</view>
			</view>
			<view class="box-item">
				<view class="box-item-head">
					<view class="item-head-icon">
						<image src="/static/ICON_BTC21.png"></image>
					</view>
					<text class="item-head-title">FIL云算力</text>
				</view>
				<view class="box-item-info">
					<view class="item-info-content">
						<text>总算力</text>
						<text>1TB</text>
					</view>
					<view class="item-info-content">
						<text>累计产出</text>
						<text>750 USDT</text>
					</view>
					<view class="item-info-content">
						<text>购买金额</text>
						<text>720</text>
					</view>
					<view class="item-info-content">
						<text>剩余天数</text>
						<text>720</text>
					</view>
				</view>
				<u-line color="#f5f5f5" margin="20rpx auto"></u-line>
				<view class="box-item-number">
					<text class="item-number">订单号：321654987</text>
					<button class="submit">权益转让</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import ordering from "../components/ordering";
import transfer from "../components/transfer";
import ordered from "../components/ordered";
export default {
  components: {
    ordering,
    transfer,
    ordered,
  },
  data() {
    return {
      navIndex: 0,
      isLoading: false,
      showTransfer: false,
      transfer_data: null,
      showpay: false,
      sell_type: null,
      price: null,
    };
  },
  computed: {
    ...mapGetters("mf/my", ["orderList"]),
    orderNav() {
      return [
        this.$t("mf.my.process"),
        this.$t("mf.my.transfer"),
        this.$t("mf.my.completed"),
      ];
    },
    // 建议出售价格
    proposal() {
      if (!this.transfer_data) {
        return;
      }
      let day = this.transfer_data.cycle_day - this.transfer_data.shifang_day;
      console.log(this.transfer_data, day);
      if (day > 2) {
        return parseFloat(
          (day / this.transfer_data.cycle_day) *
            this.transfer_data.price_total *
            0.75
        ).toFixed(2);
      } else {
        return 0;
      }
    },
    // 当前列表类型
    list_type() {
      if (this.navIndex == 0) {
        return "is_reward";
      } else if (this.navIndex == 1) {
        return "is_sell_in";
      } else if (this.navIndex == 2) {
        return "is_over";
      }
    },
    // 价格
    price_number() {
      if (!this.price) {
        return 0;
      } else {
        return this.price;
      }
    },
    // 提示语
    toast_text() {
      if (this.sell_type == "sell") {
        return this.$t("mf.my.transfer_success");
      } else if (this.sell_type == "cancel") {
        return this.$t("mf.my.cancel_success");
      }
    },
  },
  methods: {
    ...mapActions("mf/my", ["loadOrderList", "sellOrder"]),
    async navChange(index) {
      if (this.navIndex == index) {
        return;
      }
      this.price = null;
      this.navIndex = index;
      this.isLoading = true;
      await this.loadOrderList({ type: this.list_type });
      this.isLoading = false;
    },
    // 点击权益转让，唤出底部对话框
    transferOrder(data) {
      this.showTransfer = true;
      console.log(data);
      this.transfer_data = data;
    },
    // 点击取消转让，唤出密码框
    cancelTransfer(data) {
      this.sell_type = "cancel";
      this.showpay = true;
      console.log(data);
      this.transfer_data = data;
    },
    // 关闭权益转让
    closeShade() {
      this.showTransfer = false;
    },
    // 确认转让
    confirmTransfer() {
      if (!this.price) {
        this.makeToast({ title: "请输入正确的数量" });
        return;
      }
      if (parseFloat(this.price) > parseFloat(this.proposal)) {
        this.makeToast({ title: "转让不可大于建议转让金额" });
        return;
      }
      this.sell_type = "sell";
      this.togglePayPassword();
      this.closeShade();
    },
    // 关闭开始密码
    togglePayPassword() {
      this.showpay = !this.showpay;
    },
    // 输入密码
    async payPasswordDone(data) {
      this.togglePayPassword();
      await this.sellOrder({
        type: this.sell_type,
        order_id: this.transfer_data.id,
        sell_price: this.price_number,
        pay_password: data.password,
      });
      this.makeToast({ title: this.toast_text });
      this.loadOrderList({ type: this.list_type });
      this.price = null;
    },
  },
  async onLoad() {
    await this.loadOrderList({ type: "is_reward" });
  },
  onReachBottom() {
    //避免多次触发
    if (this.orderList.has_next_page && !this.loading["mf.my.order_list"]) {
      this.loadOrderList({
        page: this.orderList.current_page + 1,
        type: this.list_type,
      });
    }
  },
};
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
		height: 100vh;
	}
	
	.tab{
		background-color: #fff;
	}

	.sub-tab {
		width: 702rpx;
		margin: 20rpx auto;
	}

	.box {
		width: 702rpx;
		margin: 0 auto;

		.box-item {
			background-color: #fff;
			padding: 20rpx;
			margin-bottom: 20rpx;

			.box-item-head {
				display: flex;
				align-items: center;

				.item-head-title {
					font-size: 28rpx;
					font-weight: bold;
				}

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.box-item-info {
		margin-top: 20rpx;

		.item-info-content {
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;
		}
	}

	.box-item-number {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;

		.item-number {
			width: 400rpx;
		}
	}

	.submit {
		width: 223rpx;
		height: 68rpx;
		background: #2A96EE;
		border-radius: 34rpx;
		color: #fff;
		line-height: 68rpx;
	}
</style>
